<template>
    <div class="loginin">
        <!-- <div class="header">
            <div class="left lf">
                <span class="closeLogin" @click="closelogin"></span>
            </div>
            <h1>{{title}}</h1>
        </div> -->
        <div class="title">
          <div>绑定手机号</div>
          <div>首次使用微信登录需要绑定手机号码</div>
        </div>
        <div class="am-login">
            <div class="account">
                <span>手机号</span>
                <input type="text" maxlength="11" v-toggleInput autocomplete="off" placeholder="输入手机号" v-model="account">
                <!-- <i v-if="account" class="del-btn" v-del="account"></i> -->
            </div>
            <div class="password">
                <span>验证码</span>
                <input type="number" v-toggleInput maxlength="20" autocomplete="off" placeholder="输入验证码" v-model="pwd">
                <!-- <i v-if="pwd" class="del-btn" v-del="pwd"></i> -->
                <div class="getAuth"><input v-getCode @click="getCode" :name="account" value="获取验证码" type="button" ></div>

            </div>
   
            <div :class="{submit: true, ok: ableNext}" @click="logining" v-btn>确认</div>
           
        </div>

    </div>
</template>

<script>
export default {
  name: "hello",
  data() {
    return {
      title: this.$route.name,
      ableNext: false,
      account: "",
      pwd: "",
      prevUrl: this.$route.query.redirect,
      originUrl: ""
    };
  },
  components: {},
  mounted() {
    // this.fn.getLatitude();
    // if (this.getToken()) {
    //   _this.fn.addcookie("key", this.getToken(), 30 * 24);
    //   _this.$router.push({ path: "/" });
    // }
  },
  methods: {
    getCode() {
      var vm = this;
      if (!this.fn.is_tel(this.account)) {
        return this.fn.tip("手机号码有误");
      }
      this._ajax({
        url: this.fn.xqq + "getCode",
        method: "post",
        data: {
          tel: this.account
        },
        callback(db) {
          if (db.errorCode == 200) {
            vm.fn.tip("验证码发送成功");
          } else {
            vm.fn.tip(db.msg);
          }
        }
      });
    },
    logining() {
      let _this = this;

      if (_this.ableNext) {
        _this._ajax({
          url: _this.fn.xqq + "bindingWeChat",
          method: "post",
          data: {
            mobilePhone: _this.account,
            code: _this.pwd,
            callBackUrl:
              location.origin +
              location.pathname +
              "#/login/loginin?token=tokenVal",
            cancelUrl:
              location.origin + location.pathname + "#/login/PinlessPhone"
          },
          callback(db) {
            console.log(db);
            if (db.errorCode == 200) {
              console.log(db);
              db.datas.payUrl && (window.location.href = db.datas.payUrl);
              //   _this.fn.addcookie("key", db.datas.token, 30 * 24);
              //   _this.fn.addcookie("headImg", db.datas.headImg, 30 * 24);
              //   _this.fn.addcookie("nickname", db.datas.nickname, 30 * 24);
              //   if (_this.prevUrl) {
              //     _this.$router.push({ path: _this.prevUrl });
              //   } else {
              //     _this.$router.push({ path: "/" });
              //   }
            } else {
              _this.fn.tip(db.msg);
            }
          }
        });
      }
    },

    closelogin() {
      if (/login/g.test(this.originUrl) || this.originUrl) {
        this.$router.push({ path: "/" });
      } else {
        this.$router.go(-1);
      }
    }
  },
  beforeRouteEnter(to, from, next) {
    next(el => {
      el.originUrl = from.path;
    });
  },
  watch: {
    account() {
      this.ableNext = this.fn.authFn([this.account, this.pwd]);
    },
    pwd() {
      this.ableNext = this.fn.authFn([this.account, this.pwd]);
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
@import "../../assets/css/login.scss";
.header {
  border: none;
  box-shadow: none;
}
.loginin .am-login .submit{
  font-size: 0.8rem;
}
.title {
  text-align: left;
  padding-left: 0.75rem;
  > div:nth-child(1) {
    font-size: 2rem;
    line-height: 2rem;
    padding-top: 2.5rem;
    color: #333333;
  }
  > div:nth-child(2) {
    font-size: 0.7rem;
    line-height: 1.5rem;
    color: #999999;
  }
}

.loginin .am-login {
  padding-top: 1.8rem;
}
.loginin .am-login .password input {
  width: 5rem;
}


</style>
